import { useState } from 'react';
import IconFont from '@/components/IconFont';
import { Button, Select } from 'antd';
import { find } from 'lodash';
import Style from './index.module.less';

const SelectActions = (props) => {
  const { options = [], name, width, onClick, style, defaultValue, children, ...args } = props;
  const hasMultiOptions = options?.length;

  const [showName, setShowName] = useState(()=>{
    if(defaultValue){
      return find(options, ['value', defaultValue])?.label || name;
    }else{
      return name;
    }
  });

  if (!hasMultiOptions) {
    return (
      <Button className={Style.select_action_button} style={style} type="ghost" onClick={onClick} { ...args }>
        {showName}
        {children}
      </Button>
    );
  }


  return (
    <div style={style} className={Style.select_action_wrap}>
      <Select
        className={Style.select_action}
        style={{ width }}
        showArrow={false}
        value={showName}
        dropdownMatchSelectWidth={false}
        onChange={(value, option) => {
          options[value]?.action();
          args?.onChange?.(value, option)
          args?.needUpdateText && setShowName(option.children)
        }}
        {...args}
      >
        {options?.map(({ label, action, ...reset}, idx) => (
          <Select.Option key={idx} value={idx} type="text" {...reset}>
            {label}
          </Select.Option>
        ))}
      </Select>
      <div className={Style.symbol}>
        <IconFont type="icona-juxing11766" />
      </div>
    </div>
  );
};
export default SelectActions;
